<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	
	
	<script>
		if(!window.requestAnimationFrame){
			window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
																			window.mozRequestAnimationFrame ||
																			window.msRequestAnimationFrame ||
                                      window.oRequestAnimationFrame ||
																			function (callback) {
																				return window.setTimeout(callback, 17 /*~ 1000/60*/);
																			});
		}
		if(!window.cancelAnimationFrame){
			window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
																		 window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
																		 window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
																		 window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
																		 window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
																		 window.clearTimeout);
		}
		var utils = {};
		/**鼠标位置
		 * event.clientX、event.clientY
		 * 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条
		 * -------------------------------------
		 * event.pageX、event.pageY
		 * 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标
		 * -------------------------------------
		 * event.offsetX、event.offsetY
		 * 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性
		 * -------------------------------------
		 * event.screenX、event.screenY
		 * 鼠标相对于用户显示器屏幕左上角的X,Y坐标
		 * -------------------------------------
		 * event.scrollTop、event.scrollLeft
		 * 是该元素的显示（可见）的内容与该元素实际的内容的距离 (出现滚动条有效)
		 */
		utils.captureMouse = function(element){
			var mouse = {x: 0, y: 0};
			element.addEventListener('mousemove', function(event){
				var x, y;
				if(event.pageX || event.pageY){
					x = event.pageX;
					y = event.pageY;
				}else{
					x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
					y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
				}
				x -= element.offsetLeft;
				y -= element.offsetTop;
				
				mouse.x = x;
				mouse.y = y;
			}, false);
			return mouse;
		};
		
		
	</script>
</body>
</html>